<template>
  <div class="svg-content" :id="id">
    <div>kwkw</div>
    <svg width="0" height="0">
      <defs>
        <filter :id="id + '_filter'">
          <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"/>
          <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"/>
          <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
        </filter>
      </defs>
    </svg>
  </div>
</template>
<script>
import { d3, svgInit } from "./svgs";

export default {
  name: 'funnel',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    defaultIndex: Number,
    id: String,
  },
  data() {
    return {
      width: 290,
      height: 290,

      mask: false,
      lineWidth: 15, // 进度条宽
      offset: 20,
      diameter: 200, //
      innerRadius: 27, // 圆形进度条中心线的半径
      padding: 6,//
      circleBackground: "rgba(0,123,255,0.2)",
      stroke: "#00FFF3",
      titleFontSize: 60,
      nameFontSize: 22,
      strokeWidth: 1, // 进度条边框宽度
      startAngle: -Math.PI // 起始角度，0为3点钟方向
    };
  },
  mounted() {
    svgInit(this.drawSvg, this.id, [this.width, this.height, this.diameter, this.titleFontSize, this.nameFontSize, this.offset]);
  },
  methods: {
    drawSvg(svg, id, width, height, diameter, titleFontSize, nameFontSize, offset) {
      let me = this;
      let obj = {};
      obj.y = 30;
      obj.x = '水位';
      let oriData = [obj];
      svg.attr("width", width)
        .attr("height", height);


      //生成饼图数据
      let arc = d3.arc()
      // .outerRadius(radius)
        .cornerRadius(0);
      let drawData = d3
        .pie()
        .value(20)
        .sort(null)
        .sortValues(null)
        .startAngle(-Math.PI / 8)
        .endAngle(Math.PI / 8)(oriData);

      //生成容器
      svg.attr('style','background:#333');
      let funnel = svg.append("g")
        .attr("transform", `translate( ${width / 2}, ${height-20} )`)
        .attr("stroke", 'white')
        .attr("stroke-width", 10)
        .selectAll("path")
        .data(drawData)
        .enter()
        .append("path")
        .attr("style", "cursor: pointer")
        .attr("fill", 'white')
        .attr("d", function (d, i) {
          d.outerRadius = diameter ;
          d.innerRadius = 0;
          return arc(d);
        })

      //生成内部液体
      let circle = svg.append("g")
        .attr("transform", `translate( ${width / 2}, ${height-20} )`)

              .selectAll("path")
        .data(drawData)
        .enter()
        .append("path")
        .attr("id", (d, i) => `${me.id}_path_${i}`)
        .attr("style", "cursor: pointer")
        .attr("fill", 'yellow')
        .attr("d", function (d, i) {
          console.log(d);
          d.outerRadius = diameter * (100-d.data.y)/100 ;
          d.innerRadius = 0;
          return arc(d);
        })

      // 初始动画效果
      circle.transition()
        .duration(2000)
        .attrTween("d", function (d) {
          //初始加载时的过渡效果
          let fn = d3.interpolate({
            outerRadius: d.innerRadius
          }, d);
          return function (t) {
            return arc(fn(t));
          };
        })
    }
  }
};
</script>
